<template>
  <div class="min-h-screen bg-white flex flex-col">
    <!-- 导航栏 - 添加 fixed 定位 -->
    <nav class="fixed top-0 left-0 right-0 bg-white shadow z-50 transition-shadow duration-300">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <!-- Logo -->
          <div class="flex-shrink-0 flex items-center">
            <router-link to="/" class="flex items-center group">
              <span class="text-2xl font-bold text-red-500 transition-transform duration-300 group-hover:scale-105">
                公司logo
              </span>
            </router-link>
          </div>
          
          <!-- PC端导航菜单 -->
          <div class="hidden sm:flex sm:space-x-8">
            <router-link
              v-for="item in navItems"
              :key="item.path"
              :to="item.path"
              class="relative inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 min-w-[80px] text-center justify-center group"
              v-slot="{ isActive }"
            >
              <div class="flex flex-col items-center w-full">
                <span class="px-2">{{ $t(item.title) }}</span>
                <span 
                  class="absolute bottom-0 w-12 h-0.5 bg-red-500 transform transition-transform duration-300 ease-out"
                  :class="isActive ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
                ></span>
              </div>
            </router-link>
          </div>

          <!-- 语言切换 --><!-- 添加获取报价按钮 -->
          <div class="hidden sm:flex sm:items-center language-selector">
            <div class="relative">
              <button 
                @click="isLanguageOpen = !isLanguageOpen"
                class="flex items-center justify-between w-32 px-3 py-2 rounded-md border border-gray-300 hover:border-red-500 transition-all duration-300 focus:outline-none"
              >
                <div class="flex items-center space-x-2">
                  <span class="text-lg">{{ currentLanguage.flag }}</span>
                  <span class="text-sm text-gray-700">{{ currentLanguage.native }}</span>
                </div>
                <svg 
                  class="w-4 h-4 text-gray-500 transition-transform duration-300"
                  :class="{ 'rotate-180': isLanguageOpen }"
                  fill="none" 
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              <!-- 下拉菜单 -->
              <div 
                v-show="isLanguageOpen"
                class="absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 z-50"
              >
                <div class="py-1">
                  <button
                    v-for="lang in SUPPORTED_LANGUAGES"
                    :key="lang.code"
                    @click="changeLanguage(lang.code)"
                    class="group flex items-center justify-between w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                    :class="{ 'bg-gray-50': locale === lang.code }"
                  >
                    <div class="flex items-center space-x-2">
                      <span class="text-lg">{{ lang.flag }}</span>
                      <span>{{ lang.native }}</span>
                    </div>
                    <svg
                      v-if="locale === lang.code"
                      class="h-4 w-4 text-red-500 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="hidden sm:flex sm:items-center ml-4">
            <router-link 
              to="/order" 
              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-500 hover:bg-red-600 transition-all duration-300 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            >
              {{ $t('nav.getQuote') }}
            </router-link>
          </div>
          </div>

          
          

          <!-- 移动端菜单按钮 -->
          <div class="flex items-center sm:hidden">
            <button
              @click="mobileMenuOpen = !mobileMenuOpen"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors duration-300"
            >
              <span class="sr-only">Open main menu</span>
              <svg
                class="h-6 w-6 transition-transform duration-300"
                :class="{ 'rotate-180': mobileMenuOpen }"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  v-if="!mobileMenuOpen"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                />
                <path
                  v-else
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div
        v-show="mobileMenuOpen"
        class="sm:hidden"
      >
        <div class="pt-2 pb-3 space-y-1">
          <router-link
            v-for="item in navItems"
            :key="item.path"
            :to="item.path"
            class="relative block pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:text-red-500 min-h-[44px] flex items-center transition-colors duration-300 group"
            v-slot="{ isActive }"
          >
            <div class="flex flex-col w-full">
              <span :class="{ 'text-red-500': isActive }">{{ $t(item.title) }}</span>
              <span 
                class="absolute bottom-0 left-3 w-12 h-0.5 bg-red-500 transform transition-transform duration-300 ease-out"
                :class="isActive ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
              ></span>
            </div>
          </router-link>
          <!-- 移动端语言切换 -->
          <div class="pl-3 pr-4 py-2 sm:hidden">
            <select
              :value="locale"
              @change="e => changeLanguage(e.target.value)"
              class="form-select rounded-md border-gray-300 w-32 min-h-[44px] cursor-pointer"
            >
              <option 
                v-for="lang in SUPPORTED_LANGUAGES"
                :key="lang.code"
                :value="lang.code"
              >
                {{ lang.flag }} {{ lang.native }}
              </option>
            </select>
          </div>
          <!-- 在移动端菜单的语言切换后添加 -->
          <div class="pl-3 pr-4 py-2">
            <router-link 
              to="/order" 
              class="block w-full text-left px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 transition-all duration-300 min-h-[44px] flex items-center"
            >
              {{ $t('nav.getQuote') }}
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <!-- 添加一个占位 div，防止内容被固定导航栏遮挡 -->
    <div class="h-16"></div>

    <!-- 主要内容区域 -->
    <main class="flex-grow">
      <slot></slot>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800" v-motion-slide-visible-once-bottom>
      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <!-- 公司信息 -->
          <div class="space-y-4">
            <span class="text-2xl font-bold text-white">Company</span>
            <p class="text-gray-300">{{ $t('footer.description') }}</p>
          </div>
          
          <!-- 快速链接 -->
          <div>
            <h3 class="text-white font-semibold mb-4">{{ $t('footer.quickLinks') }}</h3>
            <ul class="space-y-2">
              <li v-for="item in navItems" :key="item.path">
                <router-link :to="item.path" class="text-gray-300 hover:text-red-500">
                  {{ $t(item.title) }}
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 联系方式 -->
          <div>
            <h3 class="text-white font-semibold mb-4">{{ $t('footer.contact') }}</h3>
            <ul class="space-y-2 text-gray-300">
              <li>{{ $t('footer.address') }}</li>
              <li>{{ $t('footer.phone') }}</li>
              <li>{{ $t('footer.emailLabel') }} contact@manufacturing.com</li>
            </ul>
          </div>
          
          <!-- 社交媒体 -->
          <div>
            <h3 class="text-white font-semibold mb-4">{{ $t('footer.followUs') }}</h3>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-300 hover:text-red-500">
                <span class="sr-only">Facebook</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/>
                </svg>
              </a>
              <a href="#" class="text-gray-300 hover:text-red-500">
                <span class="sr-only">Twitter</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
                </svg>
              </a>
              <a href="#" class="text-gray-300 hover:text-red-500">
                <span class="sr-only">LinkedIn</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="mt-8 border-t border-gray-700 pt-8 text-center">
          <p class="text-gray-300">&copy; {{ new Date().getFullYear() }} Company. {{ $t('footer.rights') }}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import enLocale from '../i18n/en'
import zhLocale from '../i18n/zh'

const { t, locale } = useI18n()
const mobileMenuOpen = ref(false)
const isLanguageOpen = ref(false)

// 支持的语言列表
const SUPPORTED_LANGUAGES = [
  enLocale.metadata,
  zhLocale.metadata
]

// 获取当前语言配置
const currentLanguage = computed(() => {
  const lang = SUPPORTED_LANGUAGES.find(l => l.code === locale.value)
  return lang || SUPPORTED_LANGUAGES[0]
})

// 语言切换处理函数
const changeLanguage = (lang: string) => {
  locale.value = lang
  isLanguageOpen.value = false
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (!target.closest('.language-selector')) {
    isLanguageOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

const navItems = [
  { path: '/', title: 'nav.home' },
  { path: '/industries', title: 'nav.industries' },
  { path: '/resources', title: 'nav.resources' },
  { path: '/about', title: 'nav.about' },
  { path: '/contact', title: 'nav.contact' }
]
</script> 